<template>
    <overallconfig :data="props.data">
        <template #properties>
            <el-form-item label="按钮形式：">
                <el-switch v-model="props.data.options.isbutton" @change="handleIsbuttonRefresh" />
            </el-form-item>

            <el-form-item v-if="props.data.options.isbutton" label="激活文本颜色：">
                <div class="little-bear-color-input">
                    <el-input v-model="props.data.options.textcolor" clearable>
                        <template #append>
                            <el-color-picker v-model="props.data.options.textcolor"/>
                        </template>
                    </el-input>
                </div>
            </el-form-item>

            <el-form-item v-if="props.data.options.isbutton" label="激活填充和边框色：">
                <div class="little-bear-color-input">
                    <el-input v-model="props.data.options.fill" clearable>
                        <template #append>
                            <el-color-picker v-model="props.data.options.fill"/>
                        </template>
                    </el-input>
                </div>
            </el-form-item>

            <el-form-item label="选项数据：">
                <el-radio-group v-model="props.data.options.options.type">
                    <el-radio-button label="静态数据" value="static" />
                    <el-radio-button label="远程数据" value="remote" />
                </el-radio-group>
            </el-form-item>
            
            <div v-if="props.data.options.options.type == 'static'" class="little-bear-ci-append">
                <div class="little-bear-table-opt">
                    <el-table :data="props.data.options.options.data" border empty-text="空">
                        <el-table-column prop="keyname" label="键名" width="80">
                            <template #default="{ row }">
                                <el-input v-model="row.label" />
                            </template>
                        </el-table-column>
                        <el-table-column prop="value" label="值">
                            <template #default="{ row, $index }">
                                <el-input v-model="row.value">
                                    <template #prepend>
                                        <el-select v-model="row.type" @change="(v) => handleOptionsTypeChange(v, $index)" style="width: 60px;">
                                            <el-option label="文本" value="text" />
                                            <el-option label="数字" value="number" />
                                            <el-option label="布尔" value="boole" />
                                        </el-select>
                                    </template>
                                </el-input>
                            </template>
                        </el-table-column>
                        <el-table-column prop="value" label="禁用" width="50">
                            <template #default="{ row }">
                                <el-switch v-model="row.disabled"/>
                            </template>
                        </el-table-column>
                        <el-table-column label="操作" width="50">
                            <template #default="{ $index,row }">
                                <el-button type="danger" icon="Delete" circle @click="handleOptionsDel($index)" />
                            </template>
                        </el-table-column>
                    </el-table>
                    <div class="little-bear-table-opt-handle">
                        <el-button type="primary" link icon="CirclePlus" @click="handleOptionsAdd"> 新增</el-button>
                    </div>
                </div>
            </div>

            <el-button v-else type="primary" plain @click="handleDialogRemoteOpen" style="width: 100%;">编辑数据</el-button>
        </template>
    </overallconfig>

    <!-- 远程配置组件 -->
    <components-remote :data="remote" @save="handleRemoteSave"  @close="handleRemoteCancel" />
</template>

<script setup>
import overallconfig from "../overallconfig.vue"
import { deepCopy, deepMerge, uuid, capitalizeFirstLetter } from "@/utils/index"

// 接收父节传入点参数
const props = defineProps({
    data: {
        type: Object,
        default: () => ({}),
    }
})

// 事件编辑
const remote = reactive({
    dialogStatus: false, // 弹窗状态
    activeName: "config", // 对应标签
    queryActiveName: "params", // 对应标签
    payloadActiveName: "formdata", // 对应标签
    form: {
        url: "", // 请求连接
        method: "get", // 请求方式
        header: [], // 请求头
        params: [], // 请求参数
        body: { // 请求数据
            type:"formdata", // 请求类型
            formdata: [], 
            json: `{
}`,
        }, 
        cookie: [], // 请求cookie
        successCode: "", // 成功处理代码
        errorCode: "" // 错误处理代码
    },
    rules: { // 校验规则
        url: [{ required: true, message: "请输入地址", trigger: "blur" }]
    },
    successCodeStatus: false, // 代码编辑状态
    errorCodeStatus: false, // 代码编辑状态
    // 响应数据
    respondCode: `{
}`
    
})

/**
 * 是否按钮
 * @param v 
 */
const handleIsbuttonRefresh = (v) => {
    if(!v){
        props.data.options.textcolor = ""
        props.data.options.fill = ""
    }
}


/**
 * 类型选择
 */
const handleOptionsTypeChange = (v, index) => {
    if(v == "text"){
        props.data.options.options.data[index].value = ""
    }else if(v == "number"){
        props.data.options.options.data[index].value = 0
    }else if(v == "boole"){
        props.data.options.options.data[index].value = false
    }
    props.data.options.options.data[index].type = v
}

/**
 * 选项数据新增
 */
const handleOptionsAdd = () => {
    props.data.options.options.data.push({label: "", value: "", type:"text", disabled: false})
}

/**
 * 选项数据删除
 */
const handleOptionsDel = (index) => {
    // 直接删除指定索引项
    props.data.options.options.data.splice(index, 1);
}

/**
 * 显示数据弹窗
 */
const handleDialogRemoteOpen = () => {
    remote.form = deepCopy(props.data.options.options.remote)
    
    remote.dialogStatus = true
}

/**
 * 远程保存
 */
const handleRemoteSave = (data) => {
    console.log(data)
}

/**
 * 远程关闭
 */
const handleRemoteCancel = () => {
}


</script>